/* SPDX-License-Identifier: Apache-2.0 */

/*
  A button group.  The seclected button can be specified by adding a
  --dark or --primary modifier to the button.

  <div class="button-group">
    <a class="button-group__button">First Button</a>
    <a class="button-group__button">Second Button</a>
  </div>

  Modifiers:
   - pagination: adds top margin for pagination button groups
*/

.button-group {
  display: block;

  &::after {
    clear: both;
    content: "";
    display: table;
  }

  &__button {
    float: left;
    border-radius: 0;
  }

  .button-group__button + .button-group__button {
    margin-left: -1px;
  }

  &__button:first-child {
    border-radius: 3px 0 0 3px;
  }

  &__button:last-child {
    border-radius: 0 3px 3px 0;
  }

  &--pagination {
    margin-top: 40px;

    @media only screen and (max-width: $tablet) {
      .button-group__button:not(:first-child, :last-child) {
        display: none; // Avoid button group's ugly wrapping on tablet / mobile
      }
    }
  }
}
